<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Muhamad Nauval Azhar">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="This is a login page template based on Bootstrap 5">
    <title>forgot</title>
    <link href="../../static/plugins/bootstrap-5.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .login-box:hover {
            box-shadow: 0 0px 0px rgba(0, 0, 0, 0.08);
            transform: translateY(-3px);
        }
    </style>
</head>

<body>
<section class="h-100">
    <div class="container h-100">
        <div class="row justify-content-sm-center h-100">
            <div class="col-xxl-4 col-xl-5 col-lg-5 col-md-7 col-sm-9" style="margin-top: 100px">
                <div class="text-center my-5">
                    <!--img src="#" width="100"-->
                </div>
                <div class="card shadow-lg">
                    <div class="card-body p-5">
                        <h1 class="fs-4 card-title fw-bold mb-4">重置密码</h1>
                        <form id="resetForm" method="POST" class="needs-validation" novalidate="" autocomplete="off">
                            <div class="mb-3">
                                <label class="mb-2 text-muted">用户名</label>
                                <input type="text" class="form-control" name="username" value="" required autofocus>
                            </div>
                            <div class="mb-3">
                                <label class="mb-2 text-muted" for="email">邮件地址</label>
                                <input id="email" type="email" class="form-control" name="email" value="" required
                                       autofocus>
                            </div>
                            <div class="mb-3">
                                <label class="mb-2 text-muted" for="newpwd">新密码</label>
                                <input id="newpwd" type="text" class="form-control" name="password" value="" required
                                       autofocus>
                            </div>

                            <div class="d-flex align-items-center">
                                <button type="submit" class="btn btn-primary ms-auto">
                                    发送邮件
                                </button>
                            </div>
                            <span style="color: red"></span>
                        </form>
                    </div>
                    <div class="card-footer py-3 border-0">
                        <div class="text-center">
                            Remember your password? <a href="{{ url_for('auth.login') }}" class="text-dark">Login</a>
                        </div>
                    </div>
                </div>
                <div class="text-center mt-5 text-muted">
                    Copyright &copy; 2025 &mdash; Follow Your Heart
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    document.getElementById('resetForm').addEventListener('submit', function (event) {
        event.preventDefault();
        var form = this;
        var formData = new FormData(form);
        fetch('/login/forgot', {method: 'POST', body: formData}).then(response => {
            if (!response.ok) {
                throw new Error('网络错误');
            } else {
                return response.text();
            }
        }).then(data => {
            if (data === 'contact-admin') {
                alert('请联系管理员后重置！');
                window.location.reload();
            } else if (data === 'reset-success') {
                alert('密码重置成功,请登录！');
                window.location.href = '/login';
            } else if (data === 'reset-nouser') {
                alert('用户名或邮箱错误！');
                window.location.reload();
            } else if (data === 'pwd-less') {
                alert('密码过短！')
            } else {
                console.log(data)
            }
        }).catch(error => {
            console.log(error)
        })

    })


</script>
</body>
</html>
